const renderDeviceData = (device: Device) => {
  if (!device.data) return null

  return (
    <div className="space-y-1">
      {Object.entries(device.data).map(([key, value]) => (
        <div key={key} className="text-sm text-white/70">
          <span className="font-medium">{key}:</span> {value}
        </div>
      ))}
    </div>
  )
}

// 在渲染部分
return (
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {devices.map(device => (
      <div key={device.id} className="bg-white/5 rounded-lg p-4">
        <div className="flex justify-between items-start">
          <div>
            <h3 className="text-lg font-medium text-white/90">{device.name}</h3>
            <p className="text-sm text-white/50">{device.type}</p>
          </div>
          <div className={`px-2 py-1 rounded text-sm ${
            device.status === 'online' ? 'bg-green-500/20 text-green-400' : 
            'bg-red-500/20 text-red-400'
          }`}>
            {device.status === 'online' ? '在线' : '离线'}
          </div>
        </div>
        
        {/* 设备参数显示 */}
        <div className="mt-4">
          {renderDeviceData(device)}
        </div>
      </div>
    ))}
  </div>
) 